<template>
  <div class="role-container">
    <edit ref="form" :show="showEditDialog" :is-add="isAdd" :item="role" @callback="editRoleCallback"/>
    <div class="head">
      <el-input size="mini" v-model="param.keyword" clearable placeholder="输入姓名搜索" class="custom-input" @keyup.enter="search">
        <template #append>
          <el-button size="mini" class="custom-btn" icon="el-icon-search" @click="search">搜索</el-button>
        </template>
      </el-input>
    </div>
    <el-row :gutter="10">
      <!--角色管理-->
      <el-col :span="12">
        <el-card class="box-card" shadow="never">
          <template #header>
            <div class="box-card-head">
              <span class="role-span">角色列表</span>
              <el-tooltip effect="dark" content="选择指定角色分配权限" placement="top">
                <i class="el-icon-question box-card-head-tips"></i>
              </el-tooltip>
              <el-button size="mini" class="right-btn" type="primary" icon="el-icon-plus" @click="showAddRole">新增</el-button>
            </div>
          </template>
          <el-table :data="roleList" highlight-current-row size="small" style="width: 100%;" @current-change="selectRole">
            <el-table-column prop="name" label="名称"/>
            <el-table-column :show-overflow-tooltip="true" prop="remark" label="描述"/>
            <el-table-column :show-overflow-tooltip="true" prop="createTime" label="创建日期">
              <template #default="scope">
                <span>{{scope.row.createTime}}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="130px" align="center">
              <template #default="scope">
                <el-button size="mini" type="primary" icon="el-icon-edit" @click="showEditRole(scope.row)"/>
                <el-button type="danger" icon="el-icon-delete" size="mini" @click="delRole(scope.row.id)"/>
              </template>
            </el-table-column>
          </el-table>
          <page :total="total" @size-change="sizeChange" @current-change="currentChange"/>
        </el-card>
      </el-col>
      <!-- 权限分配 -->
      <el-col :span="12">
        <el-card class="box-card" shadow="never">
          <template #header>
            <div class="box-card-head">
              <span class="role-span">权限分配</span>
              <el-tooltip effect="dark" content="选择指定角色分配权限" placement="top">
                <i class="el-icon-question box-card-head-tips"></i>
              </el-tooltip>
              <el-button class="right-btn" :disabled="disableSaveAuthorityBtn" icon="el-icon-check" size="mini" type="primary" @click="submitRoleAuthorityList">
                保存
              </el-button>
            </div>
          </template>
          <el-tree
            ref="authorityTreeRef"
            :data="authorityList"
            :default-checked-keys="checkedAuthorityIdList"
            :props="authorityTreeDefaultProps"
            show-checkbox
            default-expand-all
            node-key="id"/>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {ref} from "vue"
import Page from "../../../components/Page"
import {getRoleAuthorityList, getRolePageList, saveOrUpdateRoleAuthorityList, deleteRole} from "../../../api/role"
import {getAuthorityTree} from "../../../api/auth/authority"
import edit from "./edit"
import {success} from "../../../util/tipsUtils";
export default {
  components: { Page, edit },
  setup() {
    const param = ref({keyword: "", current: 1, size: 20})
    const roleList = ref([])
    const total = ref(0)
    const isAdd = ref(true)
    const showEditDialog = ref(false)
    const authorityList = ref([])
    const checkedAuthorityIdList = ref([]);
    const authorityTreeDefaultProps = {children: "children", label: "label"}
    const role = ref(null)
    const showEditRole = item => {
      role.value = item
      isAdd.value = false
      showEditDialog.value = true
    }
    const showAddRole = () => {
      isAdd.value = true
      showEditDialog.value = true
    }
    const loadRoleList = () => {
      getRolePageList(param.value, res => {
        console.log(res)
        roleList.value = res.list
        total.value = res.total
      })
    }
    const editRoleCallback = () => {
      showEditDialog.value = false
      loadRoleList()
    }
    loadRoleList()
    const search = () => {
      param.value.current = 1
      loadRoleList();
    }
    const currentChange = (current) => {
      param.value.current = current
      loadRoleList();
    }
    const sizeChange = (size) => {
      param.value.size = size
      loadRoleList();
    }
    const delRole = (id) => {
      deleteRole(id, () => {
        success("删除成功")
        loadRoleList();
      })
    }
    // 角色权限
    const loadAuthorityTree = () => {
      getAuthorityTree(res => {
        authorityList.value = res || []
      })
    }
    loadAuthorityTree()
    let roleSelectedId = 0;
    const disableSaveAuthorityBtn = ref(true)
    const authorityTreeRef = ref(null)
    const clearChecked = (list) => {
      for (const a of list) {
        authorityTreeRef.value.setChecked(a.id, false)
        if (a.children && a.children.length) {
          clearChecked(a.children)
        }
      }
    }
    const selectRole = (val) => {
      if (val) {
        // 清空权限与菜单的选中
        checkedAuthorityIdList.value = []
        clearChecked(authorityList.value)
        // 保存当前的角色id
        roleSelectedId = val.id
        // 点击后显示按钮
        disableSaveAuthorityBtn.value = false
        // 获取角色已经存在的权限列表
        getRoleAuthorityList(roleSelectedId, res => {
          let data = res
          for (let i = 0; i < data.length; i++) {
            const id = data[i].id
            checkedAuthorityIdList.value.push(id)
            authorityTreeRef.value.setChecked(id, true)
          }
        })
      }
    }
    const submitRoleAuthorityList = () => {
      const roleAuthorityList = []
      authorityTreeRef.value.getCheckedKeys().forEach(function(data) {
        roleAuthorityList.push({ id: data })
      })
      console.log(roleAuthorityList)
      const data = {
        id: roleSelectedId,
        authorityIdList: roleAuthorityList
      }
      saveOrUpdateRoleAuthorityList(data).then(() => {
        success("保存成功")
      })
    }
    return {
      param,
      role,
      showEditDialog,
      isAdd,
      roleList,
      authorityList,
      authorityTreeDefaultProps,
      checkedAuthorityIdList,
      total,
      disableSaveAuthorityBtn,
      authorityTreeRef,
      search,
      showAddRole,
      showEditRole,
      currentChange,
      sizeChange,
      selectRole,
      submitRoleAuthorityList,
      editRoleCallback,
      delRole
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
  .role-container {
    margin: 20px;
    .head {
      margin-bottom: 10px;
      .custom-input {
        width: calc(50% - 5px);
        min-width: 300px;
      }
      .custom-btn {
        &:hover {
          color: #415fff;
        }
      }
    }
    .box-card {
      .box-card-head {
        line-height: 26px;
        .right-btn {
          float: right;
          padding: 6px 9px;
        }
        .box-card-head-tips {
          font-size: 16px;
          margin-left: 5px;
          color: #415fff;
        }
      }
    }
  }
  .role-span {
    font-weight: bold;color: #303133;
    font-size: 15px;
  }
  .head-container {
    margin-bottom: 20px;
  }
</style>
